import 'package:common_utils/common_utils.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:testlzhu/common/routers/app_routers.dart';
import 'package:testlzhu/utils/index.dart';
import 'package:testlzhu/utils/inputformatter.dart';

import 'login_logic.dart';

class LoginWidget extends GetView<LoginLogic> {
  const LoginWidget({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    Get.put(LoginLogic());
    return Scaffold(
      backgroundColor: Colors.white,
      body: SingleChildScrollView(
        child: ConstrainedBox(
          constraints: BoxConstraints(maxHeight: MediaQuery.of(context).size.height),
          child: Column(
            children: [
              Center(
                child: Container(
                  child: const Text(
                    "欢迎登录",
                    style: TextStyle(fontSize: 30),
                  ),
                  margin: const EdgeInsets.only(top: 150),
                ),
              ),
              Center(
                child: Container(
                  width: 30,
                  height: 5,
                  color: const Color(0xff9FB6BD),
                  margin: const EdgeInsets.only(top: 20),
                ),
              ),
              Center(
                child: Container(
                  margin: const EdgeInsets.symmetric(horizontal: 30),
                  child: GetBuilder<LoginLogic>(builder: (logic) {
                    return TextField(
                      textInputAction: TextInputAction.next,
                      maxLength: 11,
                      inputFormatters: [
                        InputFormatter(1, controller),
                      ],
                      keyboardType: TextInputType.number,
                      decoration: InputDecoration(
                          errorText: controller.isPhone ? null : "请输入正确的手机号",
                          counterText: '',
                          label: const Text('账号'),
                          labelStyle: const TextStyle(color: Colors.black),
                          hintText: '请输入手机号或者邮箱',
                          hintStyle: const TextStyle(color: Color(0xff999999))),
                      onChanged: (String value) {
                        controller.state.account=value;
                      },
                    );
                  }),
                ),
              ),
              Center(
                child: Container(
                  margin: const EdgeInsets.symmetric(horizontal: 30),
                  child: GetBuilder<LoginLogic>(builder: (logic) {
                    return TextField(
                      maxLength: 8,
                      obscureText: logic.visi ? false : true,
                      decoration: InputDecoration(
                          suffixIcon: IconButton(
                              onPressed: () {
                                controller.setVis();
                              },
                              icon: Icon(logic.visi ? Icons.visibility : Icons.visibility_off)),
                          label: const Text('密码'),
                          labelStyle: const TextStyle(color: Colors.black),
                          hintText: '请输入密码',
                          hintStyle: const TextStyle(color: Color(0xff999999))),
                      onChanged: (String value) {
                        controller.state.pass=value;

                      },
                    );
                  }),
                ),
              ),
              Center(
                child: Container(
                    width: double.infinity,
                    margin: const EdgeInsets.only(top: 50, left: 20, right: 20),
                    decoration: const BoxDecoration(borderRadius: BorderRadius.all(Radius.circular(90)), color: Color(0xff9FB6BD), boxShadow: [
                      BoxShadow(
                        offset: Offset(0, 15),
                        color: Color(0xff999999),
                        blurRadius: 5.0,
                      )
                    ]),
                    child: CupertinoButton(
                      onPressed: () {
                        controller.login();
                      },
                      child: const Text(
                        '登录',
                        style: TextStyle(color: Colors.white),
                      ),
                    )),
              ),
              Container(
                margin: const EdgeInsets.only(left: 30, right: 30, top: 20),
                child: Row(
                  children: [
                    TextButton(
                        onPressed: () {
                          Get.toNamed(AppRoutes.registerAccount);
                        },
                        child: const Text("立即注册")),
                    const Expanded(child: Text("")),
                    TextButton(
                      onPressed: () {
                        Get.toNamed(AppRoutes.forGetPass);
                      },
                      child: const Text("忘记密码"),
                    )
                  ],
                ),
              ),
              const Expanded(flex: 2, child: Text('')),
              Container(
                margin: EdgeInsets.only(bottom: 30),
                child: Column(
                  children: [
                    Container(
                      margin: const EdgeInsets.only(left: 30, right: 30),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          Expanded(
                            flex: 1,
                            child: Container(
                              color: Colors.red,
                              height: 1,
                            ),
                          ),
                          Container(
                            child: const Text('第三方登录'),
                            margin: const EdgeInsets.symmetric(horizontal: 10),
                          ),
                          Expanded(
                            flex: 1,
                            child: Container(
                              color: Colors.red,
                              height: 1,
                            ),
                          ),
                        ],
                      ),
                    ),
                    Container(
                      margin: EdgeInsets.only(top: 30),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          Util.getAssets('qq_icon', format: 'webp', width: 44, height: 44),
                          Container(margin: EdgeInsets.only(left: 20), child: Util.getAssets('weixin_img', format: 'webp', width: 44, height: 44)),
                        ],
                      ),
                    ),
                  ],
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
}
